<template>
  <el-select
    v-model="value"
    filterable
    remote
    :disabled="disabled"
    reserve-keyword
    placeholder="请选择或者输入"
    remote-show-suffix
    :remote-method="remoteMethod"
    :loading="loading"
  >
    <el-option v-for="(item, index) in selectList" :key="index" :label="item" :value="item" />
  </el-select>
</template>
<script setup>
import * as advanceApi from '@/api/ent/advanceSearch/index.ts'
import { debounce } from 'lodash-es'
const props = defineProps({
  value: String,
  disabled: Boolean,
  fieldObj: Object
})

const selectList = ref([])
const loading = ref(false)
const { value, disabled } = toRefs(props)
const remoteMethod = debounce(async (val) => {
  try {
    loading.value = true
    let obj = {
      field: props.fieldObj.field,
      value: val,
      attribute: props.fieldObj.attribute
    }
    const result = await advanceApi.getFieldDic(obj)
    selectList.value = result
  } finally {
    loading.value = false
  }
}, 300)
watch(
  () => props.fieldObj,
  (val) => {
    if (val) {
      remoteMethod('')
    }
  },
  { immediate: true, deep: true }
)
// 在组件卸载时取消防抖函数
onUnmounted(() => {
  remoteMethod?.cancel()
})
</script>
<style scoped lang="scss"></style>
